<template>
  <div :style="{ padding: '30px 0 0 0' }">
    <el-form
      :style="{ padding: '20px 0px 120px' }"
      class="add-update-preview"
      ref="ruleForm"
      :model="ruleForm"
      label-width="140px"
    >
      <el-row>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'xuesheng'"
          label="学号"
          prop="xuehao"
        >
          <el-input
            v-model="ruleForm.xuehao"
            readonly
            placeholder="学号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'xuesheng'"
          label="姓名"
          prop="xingming"
        >
          <el-input
            v-model="ruleForm.xingming"
            placeholder="姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'xuesheng'"
          label="性别"
          prop="xingbie"
        >
          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
            <el-option
              v-for="(item, index) in xueshengxingbieOptions"
              v-bind:key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'xuesheng'"
          label="邮箱"
          prop="youxiang"
        >
          <el-input
            v-model="ruleForm.youxiang"
            placeholder="邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'xuesheng'"
          label="手机号码"
          prop="shoujihaoma"
        >
          <el-input
            v-model="ruleForm.shoujihaoma"
            placeholder="手机号码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'xuesheng'"
          label="头像"
          prop="touxiang"
        >
          <file-upload
            tip="点击上传头像"
            action="file/upload"
            :limit="3"
            :multiple="true"
            :fileUrls="ruleForm.touxiang ? ruleForm.touxiang : ''"
            @change="xueshengtouxiangUploadChange"
          ></file-upload>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'jiaoshi'"
          label="工号"
          prop="gonghao"
        >
          <el-input
            v-model="ruleForm.gonghao"
            readonly
            placeholder="工号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'jiaoshi'"
          label="姓名"
          prop="xingming"
        >
          <el-input
            v-model="ruleForm.xingming"
            placeholder="姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'jiaoshi'"
          label="性别"
          prop="xingbie"
        >
          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
            <el-option
              v-for="(item, index) in jiaoshixingbieOptions"
              v-bind:key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'jiaoshi'"
          label="邮箱"
          prop="youxiang"
        >
          <el-input
            v-model="ruleForm.youxiang"
            placeholder="邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'jiaoshi'"
          label="手机号码"
          prop="shoujihaoma"
        >
          <el-input
            v-model="ruleForm.shoujihaoma"
            placeholder="手机号码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'jiaoshi'"
          label="职称"
          prop="zhicheng"
        >
          <el-select v-model="ruleForm.zhicheng" placeholder="请选择职称">
            <el-option
              v-for="(item, index) in jiaoshizhichengOptions"
              v-bind:key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'jiaoshi'"
          label="头像"
          prop="touxiang"
        >
          <file-upload
            tip="点击上传头像"
            action="file/upload"
            :limit="3"
            :multiple="true"
            :fileUrls="ruleForm.touxiang ? ruleForm.touxiang : ''"
            @change="jiaoshitouxiangUploadChange"
          ></file-upload>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-if="flag == 'users'"
          label="用户名"
          prop="username"
        >
          <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item :style="{ padding: '0', margin: '0' }">
          <el-button
            :style="{
              border: '0',
              cursor: 'pointer',
              padding: '0',
              margin: '0 20px 0 0',
              outline: 'none',
              color: 'rgba(255, 255, 255, 1)',
              borderRadius: '15px',
              background: 'rgba(59, 152, 240, 0.85)',
              width: '128px',
              lineHeight: '40px',
              fontSize: '14px',
              height: '40px',
            }"
            type="primary"
            @click="onUpdateHandler"
            >修 改</el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import {
  isNumber,
  isIntNumer,
  isEmail,
  isMobile,
  isPhone,
  isURL,
  checkIdCard,
} from '@/utils/validate'

export default {
  data() {
    return {
      ruleForm: {},
      flag: '',
      usersFlag: false,
      xueshengxingbieOptions: [],
      jiaoshixingbieOptions: [],
      jiaoshizhichengOptions: [],
    }
  },
  mounted() {
    var table = this.$storage.get('sessionTable')
    this.flag = table
    this.$http({
      url: `${this.$storage.get('sessionTable')}/session`,
      method: 'get',
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.ruleForm = data.data
      } else {
        this.$message.error(data.msg)
      }
    })
    this.xueshengxingbieOptions = '男,女'.split(',')
    this.jiaoshixingbieOptions = '男,女'.split(',')
    this.jiaoshizhichengOptions = '高级讲师,讲师,助教'.split(',')
  },
  methods: {
    xueshengtouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls
    },
    jiaoshitouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls
    },
    onUpdateHandler() {
      if (!this.ruleForm.xuehao && 'xuesheng' == this.flag) {
        this.$message.error('学号不能为空')
        return
      }

      if (!this.ruleForm.mima && 'xuesheng' == this.flag) {
        this.$message.error('密码不能为空')
        return
      }

      if (!this.ruleForm.xingming && 'xuesheng' == this.flag) {
        this.$message.error('姓名不能为空')
        return
      }

      if (
        'xuesheng' == this.flag &&
        this.ruleForm.youxiang &&
        !isEmail(this.ruleForm.youxiang)
      ) {
        this.$message.error(`邮箱应输入邮箱格式`)
        return
      }

      if (
        'xuesheng' == this.flag &&
        this.ruleForm.shoujihaoma &&
        !isMobile(this.ruleForm.shoujihaoma)
      ) {
        this.$message.error(`手机号码应输入手机格式`)
        return
      }

      if (this.ruleForm.touxiang != null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(
          new RegExp(this.$base.url, 'g'),
          ''
        )
      }
      if (!this.ruleForm.gonghao && 'jiaoshi' == this.flag) {
        this.$message.error('工号不能为空')
        return
      }

      if (!this.ruleForm.mima && 'jiaoshi' == this.flag) {
        this.$message.error('密码不能为空')
        return
      }

      if (!this.ruleForm.xingming && 'jiaoshi' == this.flag) {
        this.$message.error('姓名不能为空')
        return
      }

      if (
        'jiaoshi' == this.flag &&
        this.ruleForm.youxiang &&
        !isEmail(this.ruleForm.youxiang)
      ) {
        this.$message.error(`邮箱应输入邮箱格式`)
        return
      }

      if (
        'jiaoshi' == this.flag &&
        this.ruleForm.shoujihaoma &&
        !isMobile(this.ruleForm.shoujihaoma)
      ) {
        this.$message.error(`手机号码应输入手机格式`)
        return
      }
      if (!this.ruleForm.zhicheng && 'jiaoshi' == this.flag) {
        this.$message.error('职称不能为空')
        return
      }

      if (this.ruleForm.touxiang != null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(
          new RegExp(this.$base.url, 'g'),
          ''
        )
      }
      if ('users' == this.flag && this.ruleForm.username.trim().length < 1) {
        this.$message.error(`用户名不能为空`)
        return
      }
      this.$http({
        url: `${this.$storage.get('sessionTable')}/update`,
        method: 'post',
        data: this.ruleForm,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '修改信息成功',
            type: 'success',
            duration: 1500,
            onClose: () => {},
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.el-date-editor.el-input {
  width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
  padding: 0 10px 0 0;
  color: #333;
  width: 140px;
  font-size: 14px;
  line-height: 40px;
  text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
  margin-left: 140px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
  border: 2px solid #797979;
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
  color: #333;
  width: 300px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
  border: 2px solid #797979;
  border-radius: 4px;
  padding: 0 10px;
  outline: none;
  color: #333;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
  border: 2px solid #797979;
  border-radius: 4px;
  padding: 0 10px 0 30px;
  outline: none;
  color: #333;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview /deep/ .el-upload--picture-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: initial;
  vertical-align: middle;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
  border: 2px dashed #797979;
  cursor: pointer;
  border-radius: 6px;
  color: #797979;
  width: 150px;
  font-size: 32px;
  line-height: 150px;
  text-align: center;
  height: 150px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
  border: 2px dashed #797979;
  cursor: pointer;
  border-radius: 6px;
  color: #797979;
  width: 150px;
  font-size: 32px;
  line-height: 150px;
  text-align: center;
  height: 150px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
  border: 2px solid #797979;
  border-radius: 4px;
  padding: 12px;
  outline: none;
  color: #333;
  width: 400px;
  font-size: 14px;
  height: 120px;
}
</style>
